<div class="container">
    <div class="span-24"><h1>Blueprint Sample</h1></div>
    <div class="span-24"><h2>Layout</h2></div>
    <p>With blueprint, you can organize your elements like in a grid, using the classes span (span-number, number ranging from 1 to 24)</p>

    <h3>24 Span div with 24 divs with class="span-1" inside, the last one must have the class .last</h3>
    <code>
        &lt;div class="span-24"&gt;<br>
            &nbsp;&nbsp;&lt;div class="span-1" style="background-color:black; height:20px"&gt;&lt;/div&gt;<br>
            &nbsp;&nbsp;...<br>
            &nbsp;&nbsp;&lt;div class="span-1  last" style="background-color:black; height:20px"&gt;&lt;/div&gt;<br>
        &lt;/div&gt;
    </code>
    <div class="span-24">
        <div class="span-1" style="background-color:black; height:20px"></div>
        <div class="span-1" style="background-color:black; height:20px"></div>
        <div class="span-1" style="background-color:black; height:20px"></div>
        <div class="span-1" style="background-color:black; height:20px"></div>
        <div class="span-1" style="background-color:black; height:20px"></div>
        <div class="span-1" style="background-color:black; height:20px"></div>
        <div class="span-1" style="background-color:black; height:20px"></div>
        <div class="span-1" style="background-color:black; height:20px"></div>
        <div class="span-1" style="background-color:black; height:20px"></div>
        <div class="span-1" style="background-color:black; height:20px"></div>
        <div class="span-1" style="background-color:black; height:20px"></div>
        <div class="span-1" style="background-color:black; height:20px"></div>
        <div class="span-1" style="background-color:black; height:20px"></div>
        <div class="span-1" style="background-color:black; height:20px"></div>
        <div class="span-1" style="background-color:black; height:20px"></div>
        <div class="span-1" style="background-color:black; height:20px"></div>
        <div class="span-1" style="background-color:black; height:20px"></div>
        <div class="span-1" style="background-color:black; height:20px"></div>
        <div class="span-1" style="background-color:black; height:20px"></div>
        <div class="span-1" style="background-color:black; height:20px"></div>
        <div class="span-1" style="background-color:black; height:20px"></div>
        <div class="span-1" style="background-color:black; height:20px"></div>
        <div class="span-1" style="background-color:black; height:20px"></div>
        <div class="span-1 last" style="background-color:black; height:20px"></div>
    </div>

    <div class="span-24" style="margin-top:20px;"><h4>You can use some useful classes on the go:</h4></div>
    <div class="span-24">
        <div class="span-5 success">.success</div>
        <div class="span-5 notice">.notice</div>
        <div class="span-5 info">.info</div>
        <div class="error span-5 last">.error</div>
    </div>
    <div class="span-24">
        <h3>This makes it possible for us to create complex positioning</h3>
    </div>
    <div class="span-24">
        <div class="span-5" style="height:20px"></div>    
        <div class="span-2" style="background-color:black; height:20px"></div>
        <div class="span-2" style="height:20px"></div>
        <div class="span-2" style="background-color:black; height:20px"></div>
    </div>
    <div class="span-24">
        <div class="span-5" style="height:20px"></div>    
        <div class="span-1" style="background-color:black; height:20px"></div>
        <div class="span-2" style="background-color:black; height:20px"></div>
        <div class="span-2" style="height:20px"></div>
        <div class="span-2" style="background-color:black; height:20px"></div>
    </div>
    <div class="span-24">
        <div class="span-4" style="height:20px"></div>    
        <div class="span-2" style="background-color:black; height:20px"></div>
        <div class="span-1" style="height:20px"></div>
        <div class="span-2" style="background-color:black; height:20px"></div>
    </div>

    <div class="span-24"><p>html snippet that generates above:</p></div>
    <div class="span-24">
        <code>
            &lt;div class="span-24"&gt;<br>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="span-5" style="height:20px"&gt;&lt;/div&gt;<br>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="span-2" style="background-color:black; height:20px"&gt;&lt;/div&gt;<br>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="span-2" style="height:20px"&gt;&lt;/div&gt;<br>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="span-2" style="background-color:black; height:20px"&gt;&lt;/div&gt;<br>
            &nbsp;&nbsp;&nbsp;&lt;/div&gt;<br>
            &nbsp;&nbsp;&nbsp;&lt;div class="span-24"&gt;<br>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="span-5" style="height:20px"&gt;&lt;/div&gt;<br>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="span-1" style="background-color:black; height:20px"&gt;&lt;/div&gt;<br>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="span-2" style="background-color:black; height:20px"&gt;&lt;/div&gt;<br>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="span-2" style="height:20px"&gt;&lt;/div&gt;<br>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="span-2" style="background-color:black; height:20px"&gt;&lt;/div&gt;<br>
            &nbsp;&nbsp;&nbsp;&lt;/div&gt;<br>
            &nbsp;&nbsp;&nbsp;&lt;div class="span-24"&gt;<br>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="span-4" style="height:20px"&gt;&lt;/div&gt;<br>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="span-2" style="background-color:black; height:20px"&gt;&lt;/div&gt;<br>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="span-1" style="height:20px"&gt;&lt;/div&gt;<br>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="span-2" style="background-color:black; height:20px"&gt;&lt;/div&gt;<br>
            &nbsp;&nbsp;&nbsp;&lt;/div&gt;<br>
        </code>
    </div>
    <div class="span-24"><h2>Components</h2></div>
    <div class="span-24">
      <div class="span-6" id="textObject"></div>
      <div class="span-4" id="buttonObject"></div>
    </div>
    <div class="span-24"><h2>Require</h2></div>
    <div class="span-24">
        <h4>To include a Blueprint dashboard:</h4>
        <code>
            require(['cdf/Dashboard.Blueprint'],<br>
              &nbsp;&nbsp;function(Dashboard) {<br>
              &nbsp;&nbsp;&nbsp;&nbsp;...<br>
            });
        </code>
    </div>
</div>

<script language="javascript" type="text/javascript">
require(['cdf/Dashboard.Blueprint', 'cdf/components/ButtonComponent', 'cdf/components/TextInputComponent'],
  function(Dashboard, ButtonComponent, TextInputComponent) {
    var dashboard = new Dashboard();

    dashboard.addParameter("input", "");
    dashboard.addComponent(new TextInputComponent({
      name: "myInput",
      type: "textInputComponent",
      parameters:[],
      parameter: "input",
      htmlObject: "textObject",
      executeAtStart: true,
      postChange: function() {
        alert("you typed: " + this.dashboard.getParameterValue(this.parameter));
      }
    }));

    dashboard.addComponent(new ButtonComponent({
      name: "buttonComponent",
      type: "button",
      listeners:[],
      htmlObject: "buttonObject",
      label: "A button",
      expression: function() {
        this.setLabel('Yes, a clickable button');
        alert('Button was clicked');
      },
      executeAtStart: true,
      preChange: function() { return true; },
      postChange: function() { return true; },
      successCallback: function(data) {},
      failureCallback: function() {}
    }));
  dashboard.init();
});
</script>